<template>
  <div style="padding: 10px">
    <Row>
      <Col span="12">

      <Input v-model="whereMap.name"
             placeholder="临建设施"
             style="width: 300px" />

      </Col>
      <Col span="12">

      <Select v-model="whereMap.distOverlayFacilities"
              placeholder="设施类型"
              style="width:300px">
        <Option v-for="item in typeList"
                :value="item.id"
                :key="item.id">{{ item.name }}</Option>
      </Select>
      <Button @click="getList"
              style="margin-left: 40px"
              type="primary">搜索</Button>

      </Col>
    </Row>
    <Table border
           :columns="columns"
           :data="data1"
           style="margin: 20px 0"
           @on-select='select'
           @on-select-all='selectAll'
           @on-select-cancel='selectCancel'
           @on-select-all-cancel='selectAllCancel'>
      <template slot-scope="{ row }"
                slot="name">
        <strong>{{ row.name }}</strong>
      </template>
    </Table>
    <Page :total="page.total"
          size="small"
          :current="this.page.currentPage"
          :page-size="this.page.pageSize"
          show-elevator
          show-sizer
          show-total
          style="text-align: center"
          @on-change="currentChange"
          @on-page-size-change="pageChange" />
    <div class="foot-modal">
      <Row>
        <Col span="2"
             offset="8">
        <Button type="primary"
                @click="save(1)">保存</Button>
        </Col>
        <Col span="2">
        <Button @click='save(0)'>取消</Button>
        </Col>
      </Row>
    </div>
  </div>

</template>

<script>
export default {
  props: ['id', 'list'],
  data() {
    return {
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + 1)
          }
        },
        {
          title: '临建设施',
          key: 'name',
          align: 'center'
        },
        {
          title: '设施类型',
          key: 'distOverlayFacilitiesName',
          align: 'center'
        }
      ],
      data1: [],
      whereMap: {
        projectId: this.id, //机构id
        name: '',
        distOverlayFacilities: '' //临建设施类型
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      typeList: [],
      tempList: [], //传递的列表
      tempObj: {}, //每一页存的数据
      tempIdList: [] //翻页时对比的数据
    }
  },
  methods: {
    getList() {
      if (this.tempObj[this.page.currentPage]) {
        this.tempIdList = this.tempObj[this.page.currentPage]
      }
      //请求列表
      let reqData = {
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        whereMap: this.whereMap
      }
      this.$api.TemporaryFacility.findList(reqData)
        .then(res => {
          if (res.code === 200) {
            if (this.tempIdList.length > 0) {
              res.data.resultObject.forEach(item => {
                this.tempIdList.forEach(i => {
                  if (item.id == i.id) {
                    item._checked = true
                  }
                })
              })
              if (this.$parent.data.overlayFacilitiesList) {
                //如果主页的临建有数据的话
                res.data.resultObject.forEach(item => {
                  this.$parent.data.overlayFacilitiesList.forEach(i => {
                    if (item.id == i.id) {
                      item._checked = true
                    }
                  })
                })
              }
              this.data1 = res.data.resultObject
            } else {
              //console.log(this.$parent.data.overlayFacilitiesList)
              if (this.$parent.data.overlayFacilitiesList) {
                //如果主页的临建有数据的话
                res.data.resultObject.forEach(item => {
                  this.$parent.data.overlayFacilitiesList.forEach(i => {
                    if (item.id == i.id) {
                      item._checked = true
                    }
                  })
                })
              }
              this.data1 = res.data.resultObject
            }
            this.page.total = res.data.totalRecord
          }
        })
        .catch(() => {
          this.$Message.warning('获取列表失败')
        })
    },
    currentChange(current) {
      //翻页
      this.page.currentPage = current
      this.getList()
    },
    pageChange(pagesize) {
      //改变页数
      this.page.pageSize = pagesize
      this.getList()
    },
    getTypeList() {
      //获取类型列表
      this.$api.user
        .dictTypeCode('OVERLAY_FACILITIES')
        .then(res => {
          if (res.code === 200) {
            this.typeList = res.data
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('获取类型失败')
        })
    },

    save(type) {
      if (type == 1) {
        this.tempList = []
        for (var key in this.tempObj) {
          this.tempList = this.tempList.concat(this.tempObj[key])
        }
        this.$emit('postTemp', this.tempList)
      } else {
        this.$emit('postTemp', '')
      }
    },
    select(data) {
      this.tempObj[this.page.currentPage] = data
    },
    selectAll(data) {
      this.tempObj[this.page.currentPage] = data
    },
    selectCancel(data) {
      this.tempObj[this.page.currentPage] = data
    },
    selectAllCancel(data) {
      this.tempObj[this.page.currentPage] = data
    }
  },
  mounted() {
    this.getList()
    this.getTypeList()
  }
}
</script>

<style lang="scss" scoped >
.col {
  padding: 5px;
  .col-item {
    display: inline-block;
    margin-right: 10px;
  }
  label {
    display: block;
  }
}

.asterisk:before {
  content: '*';
}

.text-center {
  text-align: center;
}
.foot-modal {
  height: 100px;
  width: 100%;
  text-align: center;
  position: fix;
  bottom: 20px;
  margin-top: 30px;
}
</style>
